| Vue3 + Vite 打包发布至 npm 流程 | 您所在的位置：网站首页 › 发布npm包之前一定要重新build 吗 › Vue3 + Vite 打包发布至 npm 流程 |
Vue3 + Vite 打包发布至 npm 流程
|
文章目录
一、准备工作二、初始化项目2.1初始化：2.2创建typescript配置2.3安装 Vue3 和 Vite2.4 目录结构
三、编写代码3.1 逻辑文件代码3.2 申明文件代码
四、配置Vite五、配置命令5.1 编写打包命令5.2 打包组件
六、发布6.1 注册账户（第一次使用）6.2 命令登录 NPM 账户6.3 发布
七、下载插件并使用
随着 Vue.js 3.0 的正式发布，Vue 生态系统也进入了一个新的阶段。在 Vue.js 3.0 中，Vite 成为了默认的开发工具，并替代了 Vue CLI 作为推荐的构建工具。同时，NPM 作为 JavaScript 包管理器，对于开发者来说也是一个必备的工具。那么本文将介绍如何使用 Vue3、Vite 和 NPM 打包并发布一个 Vue 组件。 一、准备工作首先需要确保本地已安装 Node.js 和 NPM以及typescript，可以通过 node -v , npm -v和tsc -v 命令进行检查。如果没有安装，则需要先下载安装。 然后需要创建一个空文件夹，作为项目的根目录。 二、初始化项目 2.1初始化： npm init按照提示填写相关信息，生成 package.json 文件。 2.2创建typescript配置执行 tsc --init这时就会生成tsconfig.json配置文件 2.3安装 Vue3 和 Vite npm install vue vite -D-g:全局安装 -D:开发依赖，适合我们在开发阶段使用的依赖，包名会被注册到package.json中的devDependencies中，一般这种包只有在开发时使用，在开发完打包后我们可以在没有这些包的情况下继续运行项目。例如：eslit,less等 -S:生产环境，适合我们打包部署后还可以继续进行使用的包，包名会被注册到package.json中的Dependencies中，在开发完打包后需要继续使用才能正常运行的包，例如：echarts,jquery等 问：在这里为什么都选择-D? 答：在创建项目的时候我们也会安装vue和vite，所以在这里没必要在安装此插件的时候再次安装 2.4 目录结构
在这里，我用的是之前写过的自定义指令-水印代码，关于自定义指令的实现请参照我另一篇博客：Vue3 自定义指令 代码如下： //src/index.ts import type { App } from "vue"; // watermark 样式 let style = ` display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: repeat; pointer-events: none; opacity:0.5; `; const getDataUrl = (binding: any) => { const rotate = -20; const canvas = document.createElement("canvas"); // canvas.style.width = "500"; // canvas.style.height = "500"; const ctx = canvas.getContext("2d"); ctx?.rotate((rotate * Math.PI) / 180); ctx.font = binding.font; ctx.fillStyle = binding.fillStyle; ctx?.fillText(binding.text || "机密文件", -10, 108); return canvas.toDataURL("image/png"); }; const waterMarker = { mounted(el: HTMLElement, binding: any) { init(el, binding); }, }; // 初始化 const init = (el: HTMLElement, binding: any = {}) => { // 设置水印 setWaterMark(el, binding.value); // 监控 createObserver(el, binding.value); }; // 设置水印 const setWaterMark = (el: HTMLElement, binding: any = {}) => { const url = getDataUrl(binding); // 创建 waterMark const waterMark = document.createElement("div"); waterMark.className = `water-mark`; style = `${style}background-image: url(${url});`; waterMark.setAttribute("style", style); el.setAttribute("style", "position: relative;"); el.appendChild(waterMark); }; const createObserver = (el: HTMLElement, binding: any) => { const waterMarkEl = el.querySelector(".water-mark"); // Firefox和Chrome早期版本中带有前缀 const MutationObserver = window.MutationObserver || window?.WebKitMutationObserver || window?.MozMutationObserver; // 监听节点变化 const observer = new MutationObserver((mutationsList) => { console.log("mutationsList", mutationsList); if (mutationsList.length) { const { removedNodes, type, target } = mutationsList[0]; const currStyle = waterMarkEl?.getAttribute("style"); if (removedNodes[0] === waterMarkEl) { // 停止观察 observer.disconnect(); init(el, binding); } else if ( type === "attributes" && target === waterMarkEl && currStyle !== style ) { waterMarkEl.setAttribute("style", style); } } }); observer.observe(el, { childList: true, attributes: true, subtree: true, }); }; const install = (app: App) => { app.directive("waterMarker", waterMarker); }; export default { install, }; 3.2 申明文件代码 //index.d.ts import type { App } from "vue"; declare const waterMarker: { install: (app: App) => void; }; export default waterMarker; 四、配置Vite import { defineConfig } from "vite"; export default defineConfig({ build: { lib: { // Could also be a dictionary or array of multiple entry points entry: "src/index.ts", name: "waterMarker", // the proper extensions will be added fileName: "water-marker", }, rollupOptions: { // 确保外部化处理那些你不想打包进库的依赖 external: ["vue"], output: { // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量 globals: { waterMarker: "waterMarker", }, }, }, }, });这里通过 lib 配置项告诉 Vite 要打包的是一个库文件，并指定入口文件、库名称和输出文件名。同时，使用 rollupOptions 配置项将 Vue 外部化，以便在构建时不会将其打包进组件文件中，从而减小打包体积。 五、配置命令 5.1 编写打包命令在 package.json 文件中添加打包命令： { "scripts": { "build": "vite build" } } 5.2 打包组件执行以下命令进行打包： npm run build打包完成后，会在项目根目录下生成一个 dist 文件夹 注意 name 字段必须是唯一的，且不能包含大写字母和空格；main 字段要指向打包后的 UMD 格式文件；module 字段要指向打包后的 ES Module 格式文件；files 字段指定了应该包含在发布包中的文件；发布时默认会包括 package.json，license，README 和main 字段里指定的文件。忽略 node_modules，lockfile 等文件。一般情况下，files 里会指定构建出来的产物以及类型文件，而 src，test 等目录下的文件不需要跟随发布。dependencies 字段指定了依赖的 Vue和Vite 版本范围 六、发布 6.1 注册账户（第一次使用）npm官网上注册并登录 发布成功后你可以npm上搜索你发布的包名，若能搜索到。则发布成功。 注意：包名一定是唯一的，且不能包含大写字母和空格。否则你将会出现以下的错误 经过以上步骤，我们就成功地将一个 Vue3 组件打包并发布至 NPM 了，接下来我们可以npm install 命令安装并使用该组件 import waterMarker from "water-marker-vue"; app.use(waterMarker);以上为主要代码，我们便可以在页面中看到水印样式
|
安装完毕后可以向我上面这样创建相应的ts文件和d.ts申明文件
接着，需要在 package.json 文件中添加必要的字段：
【本文地址】